<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+26)+'px'}">
		<view class="title">
			<text>欢迎使用游嵊泗一码通</text>
			<text>一码通行 · 一机畅游</text>
		</view>
		<view class="box">
			<view class="logo">
				<image src="https://i.ringzle.com/file/20240129/f73171b8e28443dcbe942c0425cf2d6d.png"></image>
			</view>
			<view class="tip">
				{{liberaled?'您已开通一码通 可刷码入园':'开通即可刷码入园'}}
			</view>
			<view class="tabs">
				<view :class="tidx==0?'active':''">景点门票</view>
				<view :class="tidx==1?'active':''">其他开发中</view>
			</view>
			<view class="img">
				<image src="https://i.ringzle.com/file/20240129/94c1800277ac4b198e46b1f3236473ee.png" v-if="!liberaled">
				</image>
				<image :src="codeImg" v-else @tap="reFreash"></image>
			</view>
		</view>
		<view class="btn" v-if="!liberaled">
			<view @tap="toShowLiberal">立即开通</view>
		</view>
		<!-- 	<view class="touse_num" v-else>
			<view class="top_bg">
				<image src="https://i.ringzle.com/file/20240126/3249291c43a947b19e7e84bb55569f67.png"></image>
			</view>
			<view class="tn_num">
				<text>待使用</text>
				<view>
					<text>{{toUseNum}}</text>
					<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
			</view>
		</view> -->

		<Tabbar :tabbarIndex="2" v-if="!elderVersion"></Tabbar>
		<!-- 关怀版 -->
		<Tabbar2 :tabbarIndex="1" v-else></Tabbar2>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
		<u-popup :show="liberalShow" @close="liberalShow=false">
			<view class="details">
				<view class="title">
					<text>开通一码通</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="liberalShow=false"></image>
				</view>
				<view class="d_item">
					<text>真实姓名</text>
					<input type="text" placeholder="请输入真实姓名" v-model="userName" @blur="setUserName"
						@confirm="setUserName">
				</view>
				<view class="d_item">
					<text>证件号码</text>
					<input type="text" placeholder="请输入身份证号码" v-model="userIdCard" @blur="setUserIdCard"
						@confirm="setUserIdCard">
				</view>
				<view class="d_item">
					<text>手机号码</text>
					<view>{{userPhone}}</view>
				</view>
				<view class="d_agree">
					<image @tap="agree=true" v-if="!agree"
						src="https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png"></image>
					<image @tap="agree=false" v-else
						src="https://i.ringzle.com/file/20231027/a21562a8f54a4fd094b43eaf8dd42ee6.png"></image>
					<view>阅读并同意<span>《一码通开通协议》</span></view>
				</view>
				<view class="add_submit" @tap="toLiberal">立即开通</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Tabbar from '@/compoments/Tabbar/tabbar.vue';
	import Tabbar2 from '@/compoments/Tabbar/tabbar2.vue';
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue';
	export default {
		components: {
			Tabbar,
			Tabbar2,
			GetPhoneNumber
		},
		data() {
			return {
				elderVersion:uni.getStorageSync('elderVersion')||0,
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				liberaled: true, //是否已开通
				liberalShow: false,
				agree: false,
				userName: "",
				userIdCard: "",
				userPhone: "",
				key: '',
				toUseNum: 0,
				equityList: ['刷码入园', '酒店入住', '码头通行'],
				tidx: 0,
				codeImg: '',
			}
		},
		onReady() {
			this.$login().then(res => {
				if (res === 0) {
					this.userPhone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
					this.createCode();
				} else {
					this.liberaled = false;
					this.$refs['phoneNumber'].show = true;
				}
			})
		},
		methods: {
			toShowLiberal() {
				this.$login().then(res => {
					if (res === 0) this.liberalShow = true;
					else this.$refs['phoneNumber'].show = true;
				})
			},
			toLiberal() {
				if (!this.userName) return this.$showToast('请输入真实姓名');
				if (!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.userIdCard))
					return this.$showToast('请输入正确的身份证号码');
				if (!this.agree) return this.$showToast('请勾选协议');

				let newUserIdCard = JSON.parse(JSON.stringify(this.userIdCard));
				let newUserName = JSON.parse(JSON.stringify(this.userName));
				newUserIdCard = this.$aesTm.encrypt(newUserIdCard);
				newUserName = this.$aesTm.encrypt(newUserName);
				this.$api.post('/api/ocp/openOCP', {
					idCode: newUserIdCard,
					realName: newUserName
				}, false).then(res => {
					if (res.data.code === 0) {
						this.liberalShow = false;
						this.$showToast('开通成功');
						this.createCode();
					} else this.$showModal(res.data.msg);
				})
			},
			createCode() {
				this.$api.get('/api/ocp/validateUser').then(res => {
					if (res.data.code === 0) {
						this.key = res.data.data;
						this.$api.get('/api/ocp/createCode?key=' + this.key, {}, true, true, true).then(res => {
							if (res.data) {
								this.liberaled = true;
								this.codeImg = 'data:image/png;base64,' + uni.arrayBufferToBase64(res
								.data);
							}
						})
					} else if (res.data.msg.indexOf('请先绑定身份证开通一码通') > -1) {
						this.liberaled = false;
						this.$showModal(res.data.msg);
					} else {
						this.$showModal(res.data.msg);
					}
				})
			},
			setUserName(e) {
				this.userName = e.target.value;
			},
			setUserIdCard(e) {
				this.userIdCard = e.target.value;
			},
			loginSuccess() {
				this.userPhone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
				this.createCode();
			},
			reFreash() {
				this.$api.get('/api/ocp/createCode?key=' + this.key, {}, true, true, true).then(res => {
					if (res.data) {
						this.codeImg = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data);
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		padding-bottom: 224rpx;
		box-sizing: border-box;
		background: url(https://i.ringzle.com/file/20240129/4c8a81719c8a48d2b1aa2d1c909f5f3d.png) no-repeat;
		background-size: 100% 100%;

		&>.title {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				font-size: 48rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #111111;
				line-height: 54rpx;

				&:last-child {
					margin-top: 20rpx;
					font-size: 40rpx;
					font-weight: 400;
					color: #666666;
					line-height: 56rpx;
				}
			}
		}

		&>.box {
			width: calc(100% - 60rpx);
			margin: 62rpx 30rpx 0;
			padding: 113rpx 0 74rpx;
			border-radius: 36rpx;
			background: #fff;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.logo {
				width: 168rpx;
				height: 168rpx;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				margin-left: -84rpx;
				top: -45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				z-index: 1;

				image {
					width: 100rpx;
					height: 98rpx;
				}
			}

			.tip {
				text-align: center;
				font-size: 44rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #333333;
				line-height: 48rpx;
				background: #fff;
				position: relative;
				z-index: 10;
			}

			.tabs {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 48rpx;

				&>view {
					width: 272rpx;
					height: 80rpx;
					border-radius: 16rpx;
					border: 2rpx solid #EFEFEF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 40rpx;
					color: #666666;

					&:last-child {
						margin-left: 30rpx;
					}

					&.active {
						background: #F0F8F6;
						border: 2rpx solid #007A69;
						font-weight: bold;
						color: #007A69;
					}
				}
			}

			.img {
				padding-top: 48rpx;
				display: flex;
				align-items: center;

				image {
					width: 440rpx;
					height: 440rpx;
				}
			}
		}

		&>.btn {
			width: calc(100% - 60rpx);
			margin: 0 30rpx;
			padding: 0 60rpx 54rpx;
			box-sizing: border-box;
			border-radius: 0 0 36rpx 36rpx;
			background: #fff;

			&>view {
				width: 100%;
				height: 88rpx;
				background: #007A69;
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 40rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}

		.touse_num {
			width: calc(100% - 60rpx);
			margin: 0 30rpx;

			.top_bg {
				width: 100%;
				height: 40rpx;
				background: #fff;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tn_num {
				width: 100%;
				padding: 16rpx 30rpx 36rpx 40rpx;
				background: #fff;
				box-sizing: border-box;
				border-radius: 0 0 36rpx 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>text {
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
					line-height: 48rpx;
				}

				&>view {
					display: flex;
					align-items: center;

					&>text {
						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 48rpx;
					}

					&>image {
						margin-left: 10rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		.details {
			padding: 38rpx 0 64rpx;

			.title {
				position: relative;
				text-align: center;
				margin-bottom: 38rpx;

				text {
					font-size: 44rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 24rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.d_item {
				width: 100%;
				padding: 30rpx 20rpx;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>text {
					font-size: 40rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 56rpx;
					color: #666666;
				}

				&>input {
					border: none;
					outline: none;
					text-align: right;
					font-size: 40rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;

					&::placeholder {
						color: #AAAAAA;
					}
				}

				&>view {
					font-size: 40rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.d_agree {
				width: 100%;
				padding: 30rpx 24rpx 0;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				view {
					font-size: 36rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
					line-height: 50rpx;

					span {
						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #007A69;
					}
				}
			}

			.add_submit {
				width: calc(100% - 60rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 44rpx;
				font-size: 40rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				margin: 176rpx auto 64rpx;
			}
		}
	}

	/deep/.u-popup__content,
	/deep/.details {
		border-radius: 32rpx 32rpx 0 0 !important;
	}
</style>